<template>
    <div>
        <div data-v-295bc851="" class="person_content">
            <ul data-v-295bc851="" class="person_title clearfix">
                <li data-v-295bc851="" class="now">信息中心</li>
            </ul>
        </div>
        <el-table
                :data="tableData"
                stripe
                border
                style="width: 100%">
            <el-table-column
                    prop="username"
                    label="发送人"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="gmt_create"
                    label="接收时间"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center">
                <template slot-scope="scope" >
                    <el-button type="primary" size="mini" @click="queryManage(scope.row.id)">查看通知</el-button>
                </template>
            </el-table-column>
        </el-table>
            <!--分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    style="float: right;margin-top: 20px; margin-bottom: 22px"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="allTotal">
            </el-pagination>
        <!-- 查看发布内容-->
        <el-dialog
                title="查看发布内容"
                :visible.sync="queryCond"
                width="35%">
            <el-form :model="queryInform"  label-width="80px">
                <el-form-item  label="发布内容" prop="msg">
                    <el-input  type="textarea" v-model="queryInform.msg" style="width:200px"></el-input>
                </el-form-item>
            </el-form>
            <el-row style="margin-top:17px;">

                <el-button style="float:right;margin-left:6px;" size="mini" type="danger" plain @click="queryCond=false">取 消</el-button>
                <el-button style="float:right" size="mini" type="primary" @click="CheckMessage()">确 定</el-button>
            </el-row>
        </el-dialog>

    </div>
</template>

<script>

    export default {
        name: "MyGuanZhu.vue",
        data(){
            return{
                id:0,
                //查看通知内容
                queryInform:{},
                //查看通知内容的弹出层
                queryCond:false,
                tableData: [],
                //当前页面--》page
                currentPage:1,
                //每页几条--》limit
                pageSize:5,
                //总条数
                allTotal:0,
            }


        },
        created() {
                this.intTableAll();
            },
        methods:{
            intTableAll(){
              this.$http.post("/manage/manage/manageAllById/"+this.currentPage+"/"+this.pageSize).then(result=>{
                  if (result.data.code===2000){
                      console.log(result)
                      this.tableData=result.data.data.records
                      this.allTotal=result.data.data.total
                  }
              })
            },
            //分页
            handleSizeChange(val) {
                this.pageSize=val;
                this.intTableAll();
            },
            //分页按钮被点击，发生改变时
            handleCurrentChange(val) {
                this.currentPage=val;
                this.intTableAll();
            },
            //点击查看内容的时候
            queryManage(id){
                this.id=id;
                this.queryCond=true;
                this.$http.post("/manage/manage/queryCon/"+this.id).then(result=>{
                    console.log(result)
                    if (result.data.code===2000){
                        this.queryInform=result.data.data
                        this.$message.success(result.data.msg)
                        this.intTableAll();
                    }
                })
            },
            CheckMessage(){
                this.$http.post("/manage/manage/updateManage/"+this.id).then(result=>{
                    if (result.data.code===2000){
                        this.intTableAll();
                        this.queryCond=false;
                    }else {
                       this.intTableAll();
                    }
                })
            },
        }
    }

</script>
<style scoped>
    .person_content[data-v-295bc851] {
        width: 1012px;
        float: right;
        background: #fff;
        border-radius: 6px;
    }
    .person_info[data-v-295bc851] {
        min-height: 400px;
        padding-bottom: 30px;
    }

    .person_content {
        width: 1012px;
        float: right;
        background: #fff;
        border-radius: 6px;
    }
    .person_title li[data-v-295bc851] {
        float: left;
        line-height: 60px;
        padding: 0 30px;
        font-size: 14px;
    }
    .person_title li.now {
        border-bottom: 2px solid #d51423;
    }
    .person_title li {
        color: #d51423;
        float: left;
        line-height: 60px;
        padding: 0 30px;
        font-size: 14px;
    }
    .course_content[data-v-295bc851] {
        padding: 25px 0;
        margin: 0 25px;
        border-bottom: 2px solid #f2f2f2;
        position: relative;
    }
    .course_content img[data-v-295bc851] {
        width: 86px;
        height: 86px;
        border-radius: 50%;
    }
    .course_content p.course_name[data-v-295bc851] {
        top: 25px;
        color: #333;
    }
    .course_content a[data-v-295bc851] {
        display: block;
        width: 106px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border-radius: 6px;
        font-size: 14px;
        border: 1px solid #999;
        color: #999;
        background: #fff;
        position: absolute;
        top: 25px;
        right: 0;
        cursor: pointer;
    }
    .course_content a.close_collect[data-v-295bc851] {
        top: 80px;
        border: none;
    }
    .course_content p.course_name[data-v-295bc851] {
        top: 25px;
        color: #333;
    }
    .course_content .img_box[data-v-295bc851] {
        display: inline-block;
        width: 86px;
        height: 86px;
        border-radius: 50%;
    }
    .course_content p.course_name[data-v-295bc851] {
        top: 25px;
        color: #333;
    }
    .course_content p[data-v-295bc851] {
        position: absolute;
        font-size: 14px;
        left: 115px;
        color: #999;
    }
</style>